let goodsMsg;
set_Page();

async function set_Page() {
  const urlObj = myGetUrlVal();
  //   console.log(urlObj);
  const res = await myPromiseJQueryAjax(
    '../server/goods_detail.php',
    'post',
    { goods_id: urlObj.goods_id },
    'json'
  );

  console.log(res);

  let str = `

  <div class="detail-big" style="background-img: url(${res.goods_big_logo})"></div>
      <div class="detail-box">
        <div class="detail-top">
          <div class="top-left">
            <div class="info">
              <div class="info-left title">
                <h2>${res.goods_name} <span class="pingjia-span">商品评价</span></h2>
                <div class="right-t">
                  <span class="span02">Blanc Amant</span>
                  <span class="span01">提前5小时预定</span>
                  <p>
                    <span style="margin-left: 0" class="tag">奶油</span>
                    <span class="tag">水果</span>
                  </p>
                </div>
                <div class="right-m">
                  <p>
                    <span class="mr" style="display: block; float: left">口味基底</span
                    ><span style="margin-left: 98px; display: block">Whipping Cream</span>
                  </p>
                  <p>
                    <span class="mr" style="display: block; float: left">口感</span
                    ><span style="margin-left: 98px; display: block">绵软细腻</span>
                  </p>
                  <p>
                    <span class="mr" style="display: block; float: left">口味</span
                    ><span style="margin-left: 98px; display: block">奶油/水果</span>
                  </p>
                  <p>
                    <span class="span-sweet">库存</span>
                    <span class="span-num">${res.goods_number} </span>
                  </p>

                  <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">XL</button>
                    <button type="button" class="btn btn-default">L</button>
                    <button type="button" class="btn btn-default">M</button>
                    <button type="button" class="btn btn-default">S</button>
                    <button type="button" class="btn btn-default">XS</button>
                  </div>
                  <p class="container" style="position: relative">
                    <input value="1" class="num" />
                    <button name="-" type="button" class="jian btn btn-default" id="jia_Jian">
                      -
                    </button>
                    <button name="+" type="button" class="jia btn btn-default" id="jia_Jian">
                      +
                    </button>
                  </p>
                </div>
              </div>
              <div class="clear"></div>
              <div class="pond">
                <div class="pick-pond pond-02 pond-cur" data-id="11547">
                  <p class="p1">1磅(454g)</p>
                  <p class="p2">适合2-3人食</p>
                </div>
                <div class="pick-pond pond-02" data-id="11548">
                  <p class="p1">2磅(908g)</p>
                  <p class="p2">适合4-7人食</p>
                </div>
                <div class="pick-pond pond-02" data-id="11549">
                  <p class="p1">3磅(1.36kg)</p>
                  <p class="p2">适合8-12人食</p>
                </div>
                <div class="pick-pond pond-02" data-id="11550">
                  <p class="p1">5磅(2.27kg)</p>
                  <p class="p2">适合12-20人食</p>
                </div>
              </div>
            </div>
          </div>
          <div class="top-right">
            <div class="detail-ad">
              <div class="ad-box">
                <p><span>换购</span>| 买蛋糕可至购物车参加优惠换购</p>
              </div>
              <a href="/activity/detail/id/2211/type/2" target="_blank" title="2021年草莓季">
                <div class="ad-box">
                  <p><span>立减</span>| 最高立减50</p>
                  <i>详情 &gt;</i>
                </div>
              </a>
            </div>

            <div class="right-b">
              <p class="p-rmb"><span>￥</span><span class="span-rmb">${res.goods_price}</span></p>
              <p>
                <button name="inCart" class="add-cart" data-sku="C0701">加入购物车</button
                ><button class="buy-now" data-sku="C0701">立即订购</button>
              </p>
            </div>
          </div>
        </div>
        <div class="detail-bottom">
          <div class="description">
            <p>${res.goods_introduce}</p>
          </div>
        </div>
      </div>
  
    
`;
  goodsMsg = res;
  $('.detail-content').html(str);
}

// 事件委托\

$('.detail-content').click(function (e) {
  if (e.target.getAttribute('name') === '-') {
    $('.num').val($('.num').val() - 0 - 1 <= 1 ? 1 : $('.num').val() - 0 - 1);
  } else if (e.target.getAttribute('name') === '+') {
    $('.num').val(
      $('.num').val() - 0 + 1 >= goodsMsg.goods_number
        ? goodsMsg.goods_number
        : $('.num').val() - 0 + 1
    );
  } else if (e.target.getAttribute('name') === 'inCart') {
    // 判断 有没有 登录

    // localStorage方法
    if (window.localStorage.login === undefined) {
      // 没有登录信息 跳转 登录页页面
      if (window.confirm('您还没有登录,点击确定跳转登录页面')) {
        // 跳转登录页 同时携带 当前页面的url地址
        window.location.href = `../pages/shouye.html?url=${window.location.href}`;
      }
    } else {
      // 已经登录 当前商品加入购物车

      // 判断 localStorage 中 有没有 购物车信息
      if (window.localStorage.cart === undefined) {
        // 没有 购物车 数据信息 也就是 没有创建 购物车
        // 给 localStorage 新增 购物车属性 cart 属性值是 当前商品的数据信息

        // 给 商品信息 添加属性
        // 购买状态 默认购买
        goodsMsg.buy = true;
        // 购买数量 最小是1 最大是存储值

        if (!(Number($('.num').val()) >= 1 && Number($('.num').val()) <= goodsMsg.goods_number)) {
          // 弹出提示内容
          window.alert(`您输入的商品数量有误,请您输入 1 - ${goodsMsg.goods_number} 范围内的数据`);

          // 终止之后的程序 商品信息不写入数据库
          return;
        }

        // 添加购买数量属性
        goodsMsg.num = Number($('.num').val());

        // 将 当前商品信息 转化为json字符串 存储在 数组中 写入 localStorage 中
        window.localStorage.cart = JSON.stringify([goodsMsg]);
      } else {
        // 有购物车信息 购物车信息是 json字符串 需要先还原
        const cart = JSON.parse(window.localStorage.cart);

        if (cart.length === 0) {
          //  当前购物车是个空车 也就是 cart 是一个空数组
          //  将 当前商品信息 写入 空数组
          //  新增商品 是 数组的起始位置

          // 给当前商品新增属性属性值
          // 购买状态 默认购买
          goodsMsg.buy = true;
          // 购买数量 最小是1 最大是存储值

          if (!(Number($('.num').val()) >= 1 && Number($('.num').val()) <= goodsMsg.goods_number)) {
            // 弹出提示内容
            window.alert(`您输入的商品数量有误,请您输入 1 - ${goodsMsg.goods_number} 范围内的数据`);

            // 终止之后的程序 商品信息不写入数据库
            return;
          }

          // 添加购买数量属性
          goodsMsg.num = Number($('.num').val());

          // 在 数组的起始位置 新增商品信息
          cart.unshift(goodsMsg);

          // 将 新的数组cart 存储到 localStorage 中
          window.localStorage.cart = JSON.stringify(cart);
        } else {
          // 不是空数组 判断 当前 数组中 有没有 当前商品
          // 在 cart 数组中 判断存储的对象中goods_id 和 当前商品 goodsMsg 的 goods_id 有没有相同的

          // 使用 some() 函数 判断 有没有 goods_id 相同的情况
          let bool = cart.some(function (item) {
            // item 是 当前数组中的对象 item.goods_id 是 商品的id主键值
            // 当前商品是 goodsMsg , goodsMsg.goods_id 是 当前商品的id主键值
            // 如果有一个相同 some() 执行结果 就是 true
            return item.goods_id === goodsMsg.goods_id;
          });
          console.log(bool);

          if (bool) {
            // 如果 bool 是 true 证明 当前商品已经存在
            // 给 goods_id 相同的 商品 添加 购买数量
            // 新增的购买数量 + 原始的购买数量 不能超过 库存值

            for (let i = 0; i <= cart.length - 1; i++) {
              // cart 是 存储商品的数组 i 是 数组的索引下标
              // cart[i] 是 数组存储的 商品数据对象
              // cart[i].goods_id 是 数组中存储商品的goods_id
              // goodsMsg.goods_id 是 当前商品的goods_id
              if (cart[i].goods_id === goodsMsg.goods_id) {
                // 存储的商品 和 当前的商品 是 同一个商品
                // 给 存储商品的购买数量 累加 新增的购买数量
                // 当前商品是 cart[i]  购买数量是 cart[i].num
                // 当前新增的购买数量是 Number($('.num').val())
                // 累加之后 数值范围必须是 1 - 库存之间
                if (
                  !(
                    cart[i].num + Number($('.num').val()) >= 1 &&
                    cart[i].num + Number($('.num').val()) <= cart[i].goods_number
                  )
                ) {
                  // 弹出提示信息
                  window.alert(`您只能输出 1 - ${cart[i].goods_number - cart[i].num}`);
                  // return终止之后程序的操作
                  return;
                }

                //  当前商品的购买数量 累加 新增的购买数量
                cart[i].num += Number($('.num').val());

                //  将 新的数组 转化为 json字符串 存储到 localStorage 中
                window.localStorage.cart = JSON.stringify(cart);
              }
            }
          } else {
            // 如果 bool 是 false 证明 当前商品 不存在

            // 给当前商品新增属性属性值
            // 购买状态 默认购买
            goodsMsg.buy = true;
            // 购买数量 最小是1 最大是存储值

            if (
              !(Number($('.num').val()) >= 1 && Number($('.num').val()) <= goodsMsg.goods_number)
            ) {
              // 弹出提示内容
              window.alert(
                `您输入的商品数量有误,请您输入 1 - ${goodsMsg.goods_number} 范围内的数据`
              );

              // 终止之后的程序 商品信息不写入数据库
              return;
            }

            // 添加购买数量属性
            goodsMsg.num = Number($('.num').val());

            // 在 数组的起始位置 新增商品信息
            cart.unshift(goodsMsg);

            // 将 新的数组cart 存储到 localStorage 中
            window.localStorage.cart = JSON.stringify(cart);
          }
        }
      }

      // 跳转购物车页面
      window.location.href = '../pages/cart.html';
    }
  }
});
